<template>
    <div class='list'>
        <hr>
        <van-row>
            <van-col span="6">
                <van-sidebar v-model="activeKey">
                    <van-sidebar-item v-for="(item,index) in cate" :key="item.id" :title="item.title"
                        @click="change(index)" />
                </van-sidebar>
            </van-col>

            <van-col span="18">
                <van-card v-for="item in list" :key="item.id" :price="item.price" :title="item.title" :thumb="item.img"
                    @click="gotodetail2(item)">
                    <template #footer>
                        <van-icon name="shopping-cart" size="20px" @click="add(item)"/>
                    </template>
                </van-card>
            </van-col>
        </van-row>
    </div>
</template>

<script>
import { Toast } from 'vant';
    export default {
        data() {
            return {
                activeKey: 0,
                cate: [],
                list: [],
            };
        },
        mounted() {
            this.$http("data.json", "get").then((res) => {
                console.log(res)
                this.cate = res.data
                console.log(this.cate)
            });

        },
        methods: {
            change(index) {
                this.$http("data.json", "get").then((res) => {
                    console.log(res)
                    this.list = res.data[index].children
                    console.log(this.list)
                })
            },
            gotodetail2(item) {
                // this.$router.push({
                //     path: "/detail2",
                //     query: {
                //         item
                //     }
                // })
            },
            add(item){
                this.$store.commit("add",item)
                Toast('购物车添加成功！');
            }
        },
    };
</script>

<style lang='scss'>

</style>